<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>博客</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bh-css.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="highlight/styles/railscasts.css">
    <!--    <script src="jquery/jquery-3.6.0.js"></script>-->
    <script src="jquery/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="container-fluid" style="padding:0;">
    <div class="bh-content">
        <div class="bh-sidebar">
            <div class="bh-sidebar-main">
                <p class="bh-portrait"><img src="img/list-image.jpg"/></p>
                <h1>什百的博客</h1>
                <p>欢迎登陆博客系统</p>
            </div>
        </div>
        <div class="bh-nav-sidebar">
            <ul>
                <li><a class="active" href="index.html">Index</a></li>
                <li><a href="Article.html">Me!</a></li>
            </ul>
        </div>
        <div class="bh-main">
            <div class="bh-main-body" id="main-body">
                <!--header-->
                <nav class="bh-header" id="bh_header">
                    <a id="allArticle" class="active" href="javascript:getAllArticle()">所有文章 .</a>
                    <a id="myArticle" class="active" href="javascript:getMyArticle()">我的文章 .</a>
                </nav>

                <!--page nav start-->
                <!--<nav aria-label="Page navigation example">-->
                <!--<ul class="pagination justify-content-center bh-page">-->
                <!--<li class="page-item disabled">-->
                <!--<a class="page-link" href="#" aria-label="Previous">-->
                <!--<span aria-hidden="true">&laquo;</span>-->
                <!--<span class="sr-only">Previous</span>-->
                <!--</a>-->
                <!--</li>-->
                <!--<li class="page-item"><a class="page-link" href="#">1</a></li>-->
                <!--<li class="page-item active"><a class="page-link" href="#">2</a></li>-->
                <!--<li class="page-item"><a class="page-link" href="#">3</a></li>-->
                <!--<li class="page-item">-->
                <!--<a class="page-link" href="#" aria-label="Next">-->
                <!--<span aria-hidden="true">&raquo;</span>-->
                <!--<span class="sr-only">Next</span>-->
                <!--</a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</nav>-->
                <!--page nav end-->
            </div>
            <!--footer-->
            <div class="bh-footer">
                <p class="bh-copyright"><a href="#">联系我们</a> | 本设计由简.工作室荣誉出品</p>
                <p class="bh-copyright">copyright @ 2017~2018 简.工作室（www.jeanstudio.cn）</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>
    function getMyArticle() {
        $.get("/Article/findAll.do", function (data) {
            for (i = 0; i <= data.length - 1; i++) {
                $("#main-body").append(`<div class="bh-card">
                    <div class="bh-card-main">
                        <h3 class="bh-card-main-title"><a
                                href="/front-page/Article.html?id=${data[i].id}">${data[i].article_title}</a></h3>
                        <div class="bh-card-tag">
                            <div><i class="fa fa-clock-o"></i>${data[i].dateString}</div>
                            <div><i class="fa fa-eye"></i> ${data[i].article_count_read}</div>
                            <div><i class="fa fa-commenting-o"></i> 0</div>
                        </div>
                        <p class="bh-card-main-info">
                            ${data[i].article_description}</p>
                    </div>
                </div>`);
            }
        })
    }

    function getAllArticle() {
        $.get("/Article/all.do", function (data) {
           // alert(data);
           $("#main-body").empty();
         $("#main-body").append(`
           <nav class="bh-header" id="bh_header">
                <a id="allArticle" class="active" href="javascript:getAllArticle()">所有文章 .</a>
               </nav>
               `);
            for (i = 0; i <= data.length - 1; i++) {
                $("#main-body").append(`<div class="bh-card">
                    <div class="bh-card-main">
                        <h3 class="bh-card-main-title"><a
                                href="/front-page/Article.html?id=${data[i].id}">${data[i].article_title}</a></h3>
                        <div class="bh-card-tag">
                            <div><i class="fa fa-clock-o"></i>${data[i].dateString}</div>
                            <div><i class="fa fa-eye"></i> ${data[i].article_count_read}</div>
                            <div><i class="fa fa-commenting-o"></i> 0</div>
                        </div>
                        <p class="bh-card-main-info">
                            ${data[i].article_description}</p>
                    </div>
                </div>`);
            }
        })
    }
</script>

